<template>
  <v-div class="vue-codemirror-wrap" direction="column" alignItem="stretch" bgColor="gray"
         overflow="hidden">
    <codemirror
      :options="{ mode: 'text/javascript'}"
      @input="onCmCodeChange"
    ></codemirror>
  </v-div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/index.css'
  import 'codemirror/addon/selection/active-line.js'
  import 'codemirror/lib/codemirror.css'
  import 'codemirror/theme/monokai.css'
  import 'codemirror/addon/hint/show-hint.js'
  import 'codemirror/addon/hint/show-hint.css'
  import 'codemirror/addon/hint/html-hint.js'
  import 'codemirror/addon/hint/javascript-hint.js'
  import 'codemirror/addon/hint/css-hint.js'
  import 'codemirror/addon/lint/json-lint.js'
  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/mode/css/css.js'
  import 'codemirror/mode/htmlmixed/htmlmixed.js'
  import 'codemirror/addon/edit/closebrackets.js'
  import 'codemirror/addon/edit/matchbrackets.js'
  import view from '../core/view'
  import {clearTimeout, setTimeout} from 'timers'

  export default {
    name: 'v-code-edit',
    componentName: 'v-code-edit',
    mixins: [view],
    props: {
      desc: {
        type: String,
        default: 'v-code-edit'
      }
    },
    install: function (Vue) {
      Vue.component('v-code-edit', this)
    },
    methods: {
      onCmCodeChange (newCode) {
        // console.log("codeUpdate--js", newCode);
        let self = this
        if (self.timer) clearTimeout(self.timer)
        self.timer = setTimeout(() => {
          self.$store.commit('updateCode', {
            js: newCode
          })
        }, self.interval)
      }
    },
  }
</script>

<style>

</style>
